<script setup>
import { ref, onMounted } from 'vue'

const name = ref("hello Vue!")
const activeIndex = ref("1")
const isLoggedIn = ref(false)

const loginForm = () => {
  // 登录逻辑
}

const wenzhangs = ref([]);
onMounted(() => {
  getData()
})
const getData = async() => {
  setTimeout(() => {
    // 获取文章列表
    wenzhangs.value = [
      {title:'Vue3.0新特性使用攻略',time:"2024-10-28"},
      {title:'Vue3.0脚手架使用详解',time:"2024-10-25"},
      {title:'ElementPlus框架应用场景',time:"2024-10-17"},
      {title:'5款独立开发者必备神器',time:"2024-10-12"}
    ]
  }, 1000)
}

const kechengs = ref([]);
onMounted(() => {
  getData1()
})
const getData1 = async() => {
  setTimeout(() => {
    // 获取课程列表
    kechengs.value = [
      {title:"零基础学JavaScript",price:49},
      {title:"Vue.js从入门到实战",price:199},
      {title:"深入浅出状态管理",price:29},
      {title:"说透大厂前端项目面试题",price:69}
    ]
  }, 1000)
}

const productLists = ref([]);
onMounted(() => {
  getData2()
})
const getData2 = async() => {
  setTimeout(() => {
    // 获取商品列表
    productLists.value = [
      { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '/images/product01.png' },
      { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '/images/product02.png' },
      { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '/images/product03.png' },
      { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '/images/product04.png' },
      { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '/images/product05.png' },
      { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '/images/product06.png' },
    ]
  }, 1000)
}
</script>

<template>
  <el-container style="width: 80%;margin: 0 auto;">
    <el-main>
      <el-carousel height="420px">
        <el-carousel-item>
          <img src="/images/carousel1.png" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="/images/carousel2.png" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="/images/carousel3.png" />
        </el-carousel-item>
      </el-carousel>
      <el-row style="padding-top: 20px">
        <el-col :span="6">
          <div>
            <el-link type="primary">热门文章</el-link>
            <el-skeleton :rows="8" animated :loading="!wenzhangs.length">
              <div v-for="wenzhang in wenzhangs" :key="wenzhang.title">
                <p>{{wenzhang.title}}</p>
                <p style="font-size: 10px; color: greenyellow;">{{wenzhang.time}}</p>
              </div>
            </el-skeleton>
          </div> 
        </el-col>
        <el-col :span="2">
          <el-button @click="loginForm">
            查看更多
          </el-button> 
        </el-col>
        <el-col :span="6">
          <div>
            <el-link type="primary">热门课程</el-link>
            <el-skeleton :rows="8" animated :loading="!kechengs.length">
              <div v-for="kecheng in kechengs" :key="kecheng.title">
                <p>{{kecheng.title}}</p>
                <p style="font-size: 10px; color: red;">￥{{kecheng.price}}</p>
              </div>
            </el-skeleton>
          </div> 
        </el-col>
        <el-col :span="2">
          <el-button @click="loginForm">
            查看更多
          </el-button> 
        </el-col>
        <el-col :span="6">
          <div>
            <el-link type="primary">热门商品</el-link>
            <el-carousel>
              <el-skeleton-item variant="image" style="width: 100%; height: 100%;" animated :loading="!productLists.length" />
              <el-carousel-item v-for="productList in productLists.slice(0, 6)" :key="productList.name">
                <img :src="productList.img" />
              </el-carousel-item>
            </el-carousel>
          </div> 
        </el-col>
        <el-col :span="2">
          <el-button @click="loginForm">
            查看更多
          </el-button>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<style scoped>
.el-carousel__container img {
  width: 100%;
  height: 100%;
}
</style>